import './addPlan.less'
import { DatePicker, Space, Input, Select, InputNumber, Button, Modal, Checkbox } from 'antd';
import React, {useState } from 'react';


const addPlan: React.FC = () => {
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    const [visible, setVisible] = useState(false);
    const arr: any = [];
    let mate = [
        {
            name: '胡同学',
            flag: false
        }, {
            name: '张同学',
            flag: false
        }, {
            name: '李同学',
            flag: false
        }, {
            name: '许同学',
            flag: false
        }, {
            name: '王同学',
            flag: false
        }, {
            name: '郭同学',
            flag: false
        }, {
            name: '陈同学',
            flag: false
        }, {
            name: '赵同学',
            flag: false
        }, {
            name: '钱同学',
            flag: false
        }, {
            name: '孙同学',
            flag: false
        },
    ]
    function allFlag(){
        mate.map(item=>{
            return item.flag=!item.flag
        })
    }
    function changeitem(items: Object) {
        mate.map((item: any) => {
            if (item.name == items) {
                item.flag = !item.flag
                if (item.flag === true) {
                    arr.push(item)
                }
            }
        })
    }
    function chenagelist() {
        arr.map((item: any, index: number) => {
            if (!item.flag === true) {
                arr.splice(index, 1)
            }
        })
    }
    return <div className='cont'>
        <header className='breadcrumb_box'>
            <span className='el-breadcrumb__inner'>计划</span>
            <span className='el-breadcrumb__separator'>/</span>
            <span className='el-breadcrumb__item'>添加计划</span>
        </header>
        <div className='cont_banner'>
            | 添加计划
        </div>
        <div className='antd_btn'>
            <Space direction="vertical" size={12}>
                <div className='btn_header'>
                    <div>班级： <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
                        <Option value="lucy">网站2021A班</Option>
                    </Select>
                    </div>
                    <div>成员： <Select defaultValue="lucy" style={{ width: 120 }} disabled>
                        <Option value="lucy">10</Option>
                    </Select>
                    </div>
                    <div>分组：<InputNumber min={1} max={20} defaultValue={1} /></div>
                </div>
                <div className='btn_cont'><div>计划：<Input placeholder="请输入计划" /></div></div>
                <div className='btn_context'>时间：
                    <Space direction="vertical" size={12}>
                        <RangePicker picker='date' placeholder={['开始日期', '结束日期']} />
                    </Space>,
                </div>
                <div className='btn_bottom'><Button>自动分组</Button><Button onClick={() => setVisible(true)}>手动分组</Button></div>
                <Modal
                    title="分组"
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={500}
                    okText='确定'
                    cancelText='取消'>
                    <div className='m_context'>
                        <div className='m_left'>
                            <div className="m_l_header">
                                <Checkbox onChange={e=>{allFlag()}}></Checkbox>
                                <span onClick={e=>{allFlag()}}>全选</span>
                                <span>{arr.length}/10</span>
                            </div>
                            <div className="m_l_context">{
                                mate.map((item) => {
                                    return <p onClick={e => changeitem(item.name)} key={item.name}>
                                        <Checkbox checked={item.flag}></Checkbox>
                                        <span>{item.name}</span>
                                    </p>
                                })
                            }</div>
                        </div>
                        <div className='m_right'>
                            <button onClick={e => chenagelist()}>添加小组</button>
                        </div>
                    </div>
                </Modal>
            </Space>
        </div>
    </div>
}
export default addPlan